<template>
  <!-- :value="true" -->
  <el-popover
    ref="popover"
    v-model="popoverVis"
    placement="right"
    width="360"
    trigger="manual"
  >
    <div class="tip-content">
      <p>
        <i v-show="!pwdCheck.length" class="el-icon-warning" />
        <i v-show="pwdCheck.length" class="el-icon-success" />
        <span>至少{{ pwdPolicy.length }}个字符</span>
      </p>
      <p>
        <i v-show="!pwdCheck.character" class="el-icon-warning" />
        <i v-show="pwdCheck.character" class="el-icon-success" />
        <span>{{ pwdTip }}</span>
      </p>
      <!-- <p>
        <i v-show="!pwdCheck.name" class="el-icon-warning" />
        <i v-show="pwdCheck.name" class="el-icon-success" />
        <span>不能与用户名或者倒序的用户名相同</span>
      </p> -->
      <p class="safe-block">
        <span>安全程度：</span>
        <span class="block-item" :class="{'active': pwdCheck.safe > 0}" />
        <span class="block-item" :class="{'active': pwdCheck.safe > 1}" />
        <span class="block-item" :class="{'active': pwdCheck.safe > 2}" />
      </p>
    </div>
    <slot slot="reference" />
  </el-popover>
</template>

<script>
export default {
  name: 'PwdPopover',
  props: {
    pwdPolicy: {
      type: Object,
      default: () => {
        return {}
      }
    },
    pwdCheck: {
      type: Object,
      default: () => {
        return {}
      }
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      popoverVis: false
    }
  },
  computed: {
    pwdTip() {
      let text = ''
      const text2 = []
      if (this.pwdPolicy) {
        if (this.pwdPolicy.lowerCase) {
          text2.push(`${this.pwdPolicy.lowerCase}个小写字母`)
          text = '、小写字母'
        }
        if (this.pwdPolicy.upperCase) {
          text2.push(`${this.pwdPolicy.upperCase}个大写字母`)
          text = text ? '、字母' : '、大写字母'
        }
        if (this.pwdPolicy.specialChars) {
          text2.push(`${this.pwdPolicy.specialChars}个特殊字符（!@#$%^&*）`)
          text += '、特殊字符'
        }
      }
      return `仅限数字${text}，` + (text2.length ? `且至少包含${text2.join('、')}` : '')
    }
  },
  watch: {
    show(val) {
      this.popoverVis = val
    }
  },
  methods: {}
}
</script>

<style scoped lang="scss">
.tip-content{
  position: relative;
  .el-icon-warning{
    color: #F56C6C;
  }
  .el-icon-success{
    color: #67C23A;
  }
  p{
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .safe-block{
    display: flex;
    align-items: center;
    position: relative;
    .block-item{
      width: 60px;
      height: 2px;
      margin-right: 6px;
      background-color: #999;
    }
    .active{
      background-color: #67C23A;
    }
  }
}
</style>
